<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="data-content">
      <el-row style="height: 100%;min-height: 500px;" :gutter="20">
        <el-col :span="4" class="goods_content_l">
                <span class="title">{{treeTitle}}
                    <i v-if="treeTitle != '部门管理'" class="el-icon-close" @click="chooseDepartment"></i>
                </span>
          <div class="tree">
            <el-tree :highlight-current="true" :expand-on-click-node="false" :data="orgOptions"
                     :props="defaultProps" @node-click="chooseDepartment">
              <template #default="{ node, data }">
                        <span class="custom-tree-node jk"  >
                            <span>{{data.name}}</span>
                        </span>
              </template>
            </el-tree>
          </div>

        </el-col>
        <el-col :span="20" class="right-content">
          <div class="department">
            <el-row>
              <el-col :span="20">
                {{treeTitle}} {{tableData.total}}人
              </el-col>
            </el-row>
          </div>
          <div class="tool-add">
            <el-button size="small" @click="addView" style="margin-top: 5px;">新增</el-button>
          </div>

          <el-table v-loading="loading" :data="tableData.list"
                    @sort-change="changeTableSort" style="width: 100%;font-size: 12px;">
            <el-table-column label="姓名" prop="name" width="100">
            </el-table-column>
            <el-table-column label="职位" prop="job" width="100">
            </el-table-column>
            <el-table-column label="email" prop="email" width="160">
            </el-table-column>
            <el-table-column label="电话" prop="phone" width="100">
            </el-table-column>
            <el-table-column label="所在部门" prop="structureName" width="100">
            </el-table-column>
            <el-table-column label="数据范围" prop="dataScopeName">
            </el-table-column>



            <el-table-column width="210" align="center" label="操作">
              <template  #default="scope">
                <el-button type="text" size="small" :icon="Edit"  class="operation_bt"   @click="showView(scope.row)">详情
                </el-button>
                <el-button type="text" size="small"  :icon="Edit"  class="operation_bt"   @click="editView(scope.row)">编辑
                </el-button>
                <el-button type="text"  :icon="deleteIcon"  class="operation_bt danger"  size="small"
                           style="cursor: pointer;" @click="deleteData(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="page">
            <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                           :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
                           :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
                           @current-change="pageChange">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {Delete, Edit} from '@element-plus/icons-vue'
import common from "@/mixins/common.js";

export default {
  name: "employee_index",
  mixins: [common],
  data() {
    return {
      Edit: Edit,
      deleteIcon: Delete,
      searchObject: {
        no: 1,
        size: 8,
      },
      adPositionOptions: [],
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      tableData: {},
      orgOptions:[],
      treeTitle:""
    }
  },
  mounted() {
    this.getSearchList();


    this.loadOrgs();

  },
  methods: {
    async  loadOrgs(){
      let param = {};
      param.sortMethod = "asc";
      param.sortField = "id";
      param.level = 1;
      param.size = 500;
      param.fetch = 1;
      let res=await this.$http.form("/tenantRest/organization/list.htm", param);
      if (res.code===0){
        this.orgOptions=res.list;
      }

    },
    async getSearchList() {
      this.loading = true;
      let data = this.searchObject;
      let res = await this.$http.form("/tenantRest/employee/search.htm", data);
      if (res.code === 0) {
        this.tableData = res;
      }
      this.loading = false;

    },
    chooseDepartment(data) {
      if (data == undefined) {
        this.getSearchList();
        return;
      }
      if (!data.id) {
        this.treeTitle = '部门管理';
        //this.parentId="";
        //this.$refs.tree.setChecked([]);
        //$(".is-focusable").removeClass("is-current");
        this.chooseDepartment();
      } else {
        this.treeTitle = data.name;
      }
      this.parentId = data.id;
      this.searchObject.structure = data.id;
      this.searchObject.no = 1;
      this.loading = true;
      this.getSearchList();
    },
    addView() {
      this.$router.push({
        path: 'add'
      });
    },
    showView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'view',
        query: data
      });
    },
    editView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'update',
        query: data
      });
    },
    deleteData(row) {
      console.info("111")
      this.selectId = row.id;
      this.dialogVisible = true;
    },
    clearSearch() {
      this.searchObject.key = "";
      this.searchObject.name = "";
    },
    handleClose() {
      this.dialogVisible = false;
      let self = this;
      if (self.selectId) {
        let params = {};
        params.id = self.selectId;
        this.postData("/tenantRest/employee/delete.htm", params, function (res) {
          if (res.code == 0) {
            self.$message({
              message: '删除数据成功',
              type: 'success'
            });
            self.getSearchList();
          } else {
            self.$message.error(res.msg);
          }
        });
      }

    }

  },
}
</script>

<style scoped>

</style>
